<template>
    <div class="comp-person-info" style="margin-bottom: 16px;">
        <loading v-if="isLoading === true"></loading>
        <div class="info-container" v-if="isLoading === false">
            <div class="info-hd fn-clearfix">
                <div class="hd-left">{{commonUtil.getFirstLetterByName(detail.nickName)}}</div>
                <div class="hd-right">
                    <p class="name">{{detail.nickName}}</p>
                    <p class="num">交易次數 {{detail.totalCount}}</p>
                    <p class="num">鼓勵次數 {{detail.encourageCount}}</p>
                </div>
            </div>
            <div class="info-md">
                <p class="md-row">
                    <i class="icon icon-email"></i>
                    <span class="text">郵箱已認證</span>
                    <i class="icon icon-check"></i>
                </p>
                <p class="md-row">
                    <i class="icon icon-phone icon-highlight"></i>
                    <template v-if="detail.phone">
                        <span class="text">手機已認證</span>
                        <i class="icon icon-check"></i>
                    </template>
                    <template v-else>
                        <span class="text">手機未認證</span>
                    </template>
                </p>
                <p class="md-row">
                    <i class="icon icon-idcard icon-highlight"></i>
                    <template v-if="detail.authLevel > 'LEVEL0'">
                        <span class="text">身份已認證</span>
                        <i class="icon icon-check"></i>
                    </template>
                    <template v-else>
                        <span class="text">身份未認證</span>
                    </template>
                </p>
            </div>
            <div class="info-ft" v-if="type === 'sell'">
                <a href="javascript:;" class="ui-btn ui-btn--light" @click="submit">鼓勵他</a>
            </div>
        </div>
    </div>
</template>

<script type="text/babel">
    import commonUtil from '../../../../common/util';
    import Loading from '../../../../../grsc-base/component/Loading.vue';
    import NoData from '../../../../../grsc-base/component/NoData.vue';
    import service from '../service';

    export default {
        components: {
            Loading,
            NoData
        },
        data() {
            return {
                commonUtil: commonUtil,
                isLoading: true,
                isRequesting: false,
                detail: {}
            };
        },
        watch: {
            uid(newVal, oldVal) {
                if (newVal > 0) {
                    this._fetchData();
                }
            }
        },
        props: {
            uid: {
                type: Number,
                default: -1
            },
            type: {
                type: String,
                default: 'sell'     // sell / buy , 默认：sell
            }
        },
        created(){

        },
        methods: {

            _fetchData() {
                this.isLoading = true;
                service.countQuery({
                    uid: this.uid
                }).done((rep) => {
                    this.isLoading = false;
                    if (rep.code === window.CODE.SUCCESS) {
                        this.detail = rep.data;
                    }
                }).always(() => {
                    this.isLoading = false;
                });
            },

            /**
             * 鼓励他人
             */
            submit() {
                this.isRequesting = true;

                service.encourageAdd({
                    encouragedUid: this.detail.uid
                }).done(rep => {

                    if (rep.code === window.CODE.SUCCESS) {
                        window.success('操作成功', () => {
                            this.detail.encourageCount++;
                        });
                    } else {
                        window.error(rep.msg);
                    }
                }).fail((rep) => {
                    window.error(rep.msg);
                }).always(() => {
                    this.isRequesting = false;
                });
            }
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">

</style>
